<template>
  <div class="hero-website-startup">
    <div class="header-type-1">
      <div class="header-type-12">
        <div class="pateern">
          <div class="mask">
            <div class="mask2"></div>
            <div class="mask2"></div>
            <div class="mask3"></div>
          </div>
        </div>
        <div class="header">
          <div class="rectangle"></div>
          <div class="wiredunk">FILMACTION</div>
          <div class="button-let-talk">
            <div class="rectangle2"></div>
            <div class="services">Search</div>
          </div>
          <svg
            class="menu"
            width="40"
            height="40"
            viewBox="0 0 40 40"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8 11H32V13H8V11ZM8 27H32V29H8V27ZM32 19H8V21H32V19Z"
              fill="white"
            />
          </svg>

          <svg
            class="vector"
            width="18"
            height="16"
            viewBox="0 0 18 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4 0V16M14 0V16M0 4H4M9 8L18 4M0 8H18M0 12H4M14 12H18M1 16H17C17.2652 16 17.5196 15.8946 17.7071 15.7071C17.8946 15.5196 18 15.2652 18 15V1C18 0.734784 17.8946 0.48043 17.7071 0.292893C17.5196 0.105357 17.2652 0 17 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16Z"
              stroke="white"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          <svg
            class="arrow-left"
            width="36"
            height="33"
            viewBox="0 0 36 33"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4.5 16.5H31.5M15 26.125L4.5 16.5L15 26.125ZM4.5 16.5L15 6.875L4.5 16.5Z"
              stroke="white"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>
    </div>
    <div class="easy-way-to-create-b">生 成 数 字 人</div>
    <svg
      class="ic-search"
      width="114"
      height="24"
      viewBox="0 0 114 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M108.5 13H107.71L107.43 12.73C108.41 11.59 109 10.11 109 8.5C109 4.91 106.09 2 102.5 2C98.91 2 96 4.91 96 8.5C96 12.09 98.91 15 102.5 15C104.11 15 105.59 14.41 106.73 13.43L107 13.71V14.5L112 19.49L113.49 18L108.5 13ZM102.5 13C100.01 13 98 10.99 98 8.5C98 6.01 100.01 4 102.5 4C104.99 4 107 6.01 107 8.5C107 10.99 104.99 13 102.5 13Z"
        fill="white"
      />
    </svg>

    <div class="_2019-mahameru">© 2023. Filmaction</div>
    <div class="group-7314">
      <div class="rectangle5"></div>
      <div class="ic-user">
        <div class="rectangle6"></div>
      </div>
    </div>
    <div class="button">
      <router-link to="/ai_person" class="">修改</router-link>
    </div>
    <div class="button2">
      <div class="">保存</div>
    </div>
    <svg
      class="user"
      width="275"
      height="275"
      viewBox="0 0 275 275"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M183.333 80.2083C183.333 92.3641 178.505 104.022 169.909 112.617C161.314 121.213 149.656 126.042 137.5 126.042C125.344 126.042 113.686 121.213 105.091 112.617C96.4956 104.022 91.6667 92.3641 91.6667 80.2083C91.6667 68.0526 96.4956 56.3947 105.091 47.7993C113.686 39.2039 125.344 34.375 137.5 34.375C149.656 34.375 161.314 39.2039 169.909 47.7993C178.505 56.3947 183.333 68.0526 183.333 80.2083V80.2083ZM137.5 160.417C116.228 160.417 95.8262 168.867 80.7842 183.909C65.7422 198.951 57.2917 219.352 57.2917 240.625H217.708C217.708 219.352 209.258 198.951 194.216 183.909C179.174 168.867 158.773 160.417 137.5 160.417V160.417Z"
        stroke="#1036FF"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </div>
</template>
<script>
/* Code generated with AutoHTML Plugin for Figma */

export default {
  name: "HeroWebsiteStartup",
  components: {},
  props: {},
  data() {
    // quickfix to have components available to pass as props
    return {};
  },
};
</script>
<style scoped>
.hero-website-startup,
.hero-website-startup * {
  box-sizing: border-box;
}
.hero-website-startup {
  background: #ffffff;
  width: 1440px;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.header-type-1 {
  position: absolute;
  inset: 0;
}
.header-type-12 {
  width: 1440px;
  height: 95px;
  position: static;
}
.pateern {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask2 {
  background: #3056d3;
  width: 1440px;
  height: 83px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.mask3 {
  background: #000000;
  border-radius: 130px;
  opacity: 0.10000000149011612;
  width: 1793.68px;
  height: 1184.35px;
  position: absolute;
  left: -1435.28px;
  top: 70.79px;
  transform-origin: 0 0;
  transform: rotate(-45deg) scale(1.413, 0.051);
}
.header {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 15px;
  overflow: hidden;
}
.rectangle {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.wiredunk {
  color: #ffffff;
  text-align: left;
  font: 700 24px "Montserrat", sans-serif;
  position: absolute;
  left: 131px;
  top: calc(50% - 26px);
}
.button-let-talk {
  width: 142px;
  height: 38px;
  position: absolute;
  left: 1131px;
  top: 11px;
  overflow: hidden;
}
.rectangle2 {
  background: #ffffff;
  border-radius: 30px;
  opacity: 0.10000000149011612;
  width: 142px;
  height: 38px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.services {
  color: #ffffff;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 44px;
  top: 9px;
}
.menu {
  position: absolute;
  left: 1353px;
  top: 9px;
  overflow: visible;
}
.vector {
  position: absolute;
  left: 101px;
  top: 21px;
  overflow: visible;
}
.arrow-left {
  position: absolute;
  left: 25px;
  top: 13px;
  overflow: visible;
}
.easy-way-to-create-b {
  color: #212b36;
  text-align: left;
  font: 600 48px "Montserrat", sans-serif;
  position: absolute;
  left: 518px;
  top: calc(50% - 230px);
  width: 482px;
}
.ic-search {
  position: absolute;
  left: 1216px;
  top: 34px;
  overflow: visible;
}
._2019-mahameru {
  color: #a78585;
  text-align: left;
  font: 400 10px/24px "Open Sans", sans-serif;
  position: absolute;
  left: 675px;
  top: calc(50% - -350px);
}
.group-7314 {
  position: absolute;
  inset: 0;
}
.rectangle5 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 268.88px;
  position: absolute;
  left: 560px;
  top: 287.12px;
}
.ic-user {
  width: 270px;
  height: 270px;
  position: static;
}
.rectangle6 {
  width: 270px;
  height: 270px;
  position: absolute;
  left: 587px;
  top: 319px;
}
.button {
  background: var(--_01, #567df4);
  border-radius: 10px;
  width: 112px;
  height: 54px;
  position: absolute;
  left: 560px;
  top: 601px;
  overflow: hidden;
}
. {
  color: var(--fffcf-9, #fffcf9);
  text-align: center;
  font: 600 20px/24px "Manrope", sans-serif;
  position: absolute;
  left: 37px;
  top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button2 {
  background: var(--_01, #567df4);
  border-radius: 10px;
  width: 112px;
  height: 54px;
  position: absolute;
  left: 771px;
  top: 601px;
  overflow: hidden;
}
.user {
  position: absolute;
  left: 588px;
  top: 287px;
  overflow: visible;
}
</style>
